<template>
  <!-- 热门品牌 -->
  <div class="xtx_goods_brand">
    <div class="container">
      <div class="xtx_panel_header">
        <h3>
          热门品牌
          <small>国际经典 品质保证</small>
        </h3>
        <!-- <div class="page-bar">
          <a href="javascript:;" class="prev" @click="changePage(1)" :class="{active:page===2}">
            <span class="iconfont icon-angle-left"></span>
          </a>
          <a href="javascript:;" class="next" @click="changePage(2)" :class="{active:page===1}">
            <span class="iconfont icon-angle-right"></span>
          </a>
        </div> -->
      </div>
      <!-- 商品列表 -->
      <div class="xtx_goods">
        <ul :class="{second:page===2}">
          <li v-for="(item,i) in brands" :key="i">
            <router-link to="/brand">
              <img :src="item.picture" alt />
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home-brand',
  data () {
    return {
      brands: [],
      page: 1,
      pageSize: 5
    }
  },
  created () {
    this.getBrands()
  },
  methods: {
    // changePage (page) {
    //   if (page === this.page) return
    //   this.page = page
    // },
    getBrands () {
      this.$http.get('/home/brand').then((res) => {
        this.brands = [...res.data.result, ...res.data.result]
      })
    }
  }
}
</script>

<style scoped lang='less'>
@import "../styles/_mixins.less";
/** 热门品牌 **/
.xtx_goods_brand {
  .home_panel_header();
  padding-bottom: 32px;
  background-color: #f5f5f5;
  .page-bar {
    float: right;

    a {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 1;
      margin-top: 10px;
      background-color: #e2e2e2;
      color: #fff;
      text-align: center;
      line-height: 20px;
      cursor: not-allowed;
      > span {
        font-size: 12px;
      }
    }

    a.active {
      background-color: @xtxColor;
      cursor: pointer;
    }
    .prev {
      margin-right: 5px;
    }
  }

  .xtx_goods {
    height: 305px;
    overflow: hidden;
    ul {
      width: 2500px;
      transition: all 1s;
      animation: move 10s linear infinite;
      &:hover {
        animation-play-state: paused;
      }
      li {
        float: left;
        font-size: 0;
        margin-right: 10px;

        &:last-child {
          margin-right: 0;
        }
      }

      a {
        img {
          width: 240px;
          height: 305px;
        }
      }
    }
  }
}

@keyframes move {
  from {
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(-50%,0,0);
  }
}
</style>
